<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>URL 转二维码</title>
  <!-- 引入 Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入 Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入 QRCode.js -->
  <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#6B7280',
            accent: '#F97316',
            dark: '#1F2937',
            light: '#F9FAFB'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .shadow-soft {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .transition-smooth {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" id="navbar">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0 flex items-center">
            <i class="fa fa-qrcode text-primary text-2xl mr-2"></i>
            <span class="font-bold text-xl">QRCode Generator</span>
          </div>
        </div>
        <div class="flex items-center">
          <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-smooth">
            <i class="fa fa-github mr-1"></i> GitHub
          </a>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-grow pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
    <div class="text-center mb-10">
      <h1 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-dark mb-3">URL 转二维码</h1>
      <p class="text-gray-600 max-w-2xl mx-auto">输入任何网址，立即生成对应的二维码。支持自定义颜色、大小，并可下载生成的二维码图片。</p>
    </div>

    <div class="bg-white rounded-xl shadow-soft p-6 md:p-8 max-w-4xl mx-auto">
      <!-- 输入表单 -->
      <div class="mb-8">
        <label for="url" class="block text-sm font-medium text-gray-700 mb-2">输入 URL</label>
        <div class="flex">
          <input 
            type="url" 
            id="url" 
            class="flex-1 min-w-0 block w-full px-4 py-3 rounded-l-lg border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
            placeholder="https://example.com"
            value="https://doubao.com"
          >
          <button 
            id="generateBtn" 
            class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-r-lg font-medium transition-smooth flex items-center justify-center"
          >
            <i class="fa fa-qrcode mr-2"></i> 生成二维码
          </button>
        </div>
        <p id="errorMsg" class="mt-2 text-red-500 text-sm hidden">请输入有效的URL</p>
      </div>

      <!-- 二维码展示区 -->
      <div class="flex flex-col md:flex-row gap-8 items-center md:items-start">
        <!-- 左侧：二维码 -->
        <div class="w-full md:w-1/2 flex flex-col items-center">
          <div id="qrcodeContainer" class="bg-white p-6 rounded-lg border border-gray-100 shadow-sm mb-4 flex items-center justify-center min-h-[280px]">
            <div id="qrcode" class="w-64 h-64"></div>
          </div>
          <button id="downloadBtn" class="bg-accent hover:bg-accent/90 text-white px-5 py-2.5 rounded-lg font-medium transition-smooth flex items-center">
            <i class="fa fa-download mr-2"></i> 下载二维码
          </button>
        </div>

        <!-- 右侧：设置 -->
        <div class="w-full md:w-1/2">
          <h3 class="text-lg font-semibold mb-4">自定义设置</h3>
          
          <!-- 大小设置 -->
          <div class="mb-4">
            <label for="size" class="block text-sm font-medium text-gray-700 mb-2">尺寸</label>
            <div class="flex items-center">
              <input 
                type="range" 
                id="size" 
                min="128" 
                max="512" 
                step="32" 
                value="256" 
                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"
              >
              <span id="sizeValue" class="ml-3 text-sm font-medium w-12 text-center">256px</span>
            </div>
          </div>
          
          <!-- 前景色设置 -->
          <div class="mb-4">
            <label for="foregroundColor" class="block text-sm font-medium text-gray-700 mb-2">前景色</label>
            <div class="flex items-center">
              <input 
                type="color" 
                id="foregroundColor" 
                value="#000000" 
                class="w-10 h-10 border-0 rounded cursor-pointer"
              >
              <input 
                type="text" 
                id="foregroundColorText" 
                value="#000000" 
                class="ml-3 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm"
              >
            </div>
          </div>
          
          <!-- 背景色设置 -->
          <div class="mb-4">
            <label for="backgroundColor" class="block text-sm font-medium text-gray-700 mb-2">背景色</label>
            <div class="flex items-center">
              <input 
                type="color" 
                id="backgroundColor" 
                value="#FFFFFF" 
                class="w-10 h-10 border-0 rounded cursor-pointer"
              >
              <input 
                type="text" 
                id="backgroundColorText" 
                value="#FFFFFF" 
                class="ml-3 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm"
              >
            </div>
          </div>
          
          <!-- 纠错级别 -->
          <div class="mb-4">
            <label for="errorCorrection" class="block text-sm font-medium text-gray-700 mb-2">纠错级别</label>
            <select 
              id="errorCorrection" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
            >
              <option value="L">低 (7%)</option>
              <option value="M" selected>中 (15%)</option>
              <option value="Q">较高 (25%)</option>
              <option value="H">高 (30%)</option>
            </select>
            <p class="mt-1 text-xs text-gray-500">较高的纠错级别可以容忍更多的损坏，但会增加二维码的复杂度。</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 特性介绍 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 max-w-4xl mx-auto">
      <div class="bg-white rounded-lg p-6 shadow-soft transition-smooth hover:shadow-md">
        <div class="text-primary text-2xl mb-3">
          <i class="fa fa-bolt"></i>
        </div>
        <h3 class="text-lg font-semibold mb-2">快速生成</h3>
        <p class="text-gray-600 text-sm">输入 URL 后立即生成二维码，无需等待，操作简单直观。</p>
      </div>
      
      <div class="bg-white rounded-lg p-6 shadow-soft transition-smooth hover:shadow-md">
        <div class="text-primary text-2xl mb-3">
          <i class="fa fa-sliders"></i>
        </div>
        <h3 class="text-lg font-semibold mb-2">完全自定义</h3>
        <p class="text-gray-600 text-sm">调整尺寸、颜色和纠错级别，使二维码符合你的需求和品牌风格。</p>
      </div>
      
      <div class="bg-white rounded-lg p-6 shadow-soft transition-smooth hover:shadow-md">
        <div class="text-primary text-2xl mb-3">
          <i class="fa fa-download"></i>
        </div>
        <h3 class="text-lg font-semibold mb-2">轻松下载</h3>
        <p class="text-gray-600 text-sm">一键下载高质量 PNG 格式的二维码图片，随时使用。</p>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-4 md:mb-0">
          <div class="flex items-center">
            <i class="fa fa-qrcode text-primary text-xl mr-2"></i>
            <span class="font-bold text-lg">QRCode Generator</span>
          </div>
          <p class="text-gray-400 text-sm mt-1">简单高效的二维码生成工具</p>
        </div>
        
        <div class="flex space-x-6">
          <a href="#" class="text-gray-400 hover:text-white transition-smooth">
            <i class="fa fa-github text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-smooth">
            <i class="fa fa-twitter text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-smooth">
            <i class="fa fa-linkedin text-xl"></i>
          </a>
        </div>
      </div>
      
      <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-400 text-sm">
        <p>© 2023 QRCode Generator. 保留所有权利。</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取DOM元素
      const urlInput = document.getElementById('url');
      const generateBtn = document.getElementById('generateBtn');
      const errorMsg = document.getElementById('errorMsg');
      const qrcodeContainer = document.getElementById('qrcodeContainer');
      const qrcodeElement = document.getElementById('qrcode');
      const sizeInput = document.getElementById('size');
      const sizeValue = document.getElementById('sizeValue');
      const foregroundColor = document.getElementById('foregroundColor');
      const foregroundColorText = document.getElementById('foregroundColorText');
      const backgroundColor = document.getElementById('backgroundColor');
      const backgroundColorText = document.getElementById('backgroundColorText');
      const errorCorrection = document.getElementById('errorCorrection');
      const downloadBtn = document.getElementById('downloadBtn');
      const navbar = document.getElementById('navbar');
      
      // 初始生成二维码
      generateQRCode();
      
      // 滚动效果 - 导航栏
      window.addEventListener('scroll', function() {
        if (window.scrollY > 10) {
          navbar.classList.add('bg-white/95', 'backdrop-blur-sm');
          navbar.classList.remove('bg-white');
        } else {
          navbar.classList.remove('bg-white/95', 'backdrop-blur-sm');
          navbar.classList.add('bg-white');
        }
      });
      
      // 生成二维码
      function generateQRCode() {
        const url = urlInput.value.trim();
        
        // 验证URL
        if (!isValidUrl(url)) {
          errorMsg.classList.remove('hidden');
          return;
        }
        
        errorMsg.classList.add('hidden');
        
        // 获取配置
        const size = parseInt(sizeInput.value);
        const fgColor = foregroundColor.value;
        const bgColor = backgroundColor.value;
        const correctionLevel = errorCorrection.value;
        
        // 清空容器
        qrcodeElement.innerHTML = '';
        
        // 创建二维码
        new QRCode(qrcodeElement, {
          text: url,
          width: size,
          height: size,
          colorDark: fgColor,
          colorLight: bgColor,
          correctLevel: QRCode.CorrectLevel[correctionLevel]
        });
        
        // 启用下载按钮
        downloadBtn.disabled = false;
      }
      
      // URL验证
      function isValidUrl(url) {
        try {
          new URL(url);
          return true;
        } catch (error) {
          return false;
        }
      }
      
      // 事件监听
      generateBtn.addEventListener('click', generateQRCode);
      
      // 实时更新尺寸显示
      sizeInput.addEventListener('input', function() {
        sizeValue.textContent = `${this.value}px`;
      });
      
      // 颜色选择器和文本框同步
      foregroundColor.addEventListener('input', function() {
        foregroundColorText.value = this.value;
      });
      
      foregroundColorText.addEventListener('input', function() {
        if (/^#[0-9A-F]{6}$/i.test(this.value)) {
          foregroundColor.value = this.value;
        }
      });
      
      backgroundColor.addEventListener('input', function() {
        backgroundColorText.value = this.value;
      });
      
      backgroundColorText.addEventListener('input', function() {
        if (/^#[0-9A-F]{6}$/i.test(this.value)) {
          backgroundColor.value = this.value;
        }
      });
      
      // 下载二维码
      downloadBtn.addEventListener('click', function() {
        const canvas = qrcodeElement.querySelector('canvas');
        if (!canvas) return;
        
        // 创建下载链接
        const link = document.createElement('a');
        link.download = `qrcode-${new Date().getTime()}.png`;
        link.href = canvas.toDataURL('image/png');
        link.click();
      });
      
      // 实时生成（可选）
      // urlInput.addEventListener('input', generateQRCode);
      // sizeInput.addEventListener('change', generateQRCode);
      // foregroundColor.addEventListener('input', generateQRCode);
      // backgroundColor.addEventListener('input', generateQRCode);
      // errorCorrection.addEventListener('change', generateQRCode);
    });
  </script>
</body>
</html>